import React from 'react'
import { TabBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'

// 无状态组件
export default withRouter((props) => {
    return (
        <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#1296db"
          barTintColor="rgba(255,255,255,.6)"
          tabBarPosition="bottom"
          hidden={props.hidden}
        > 
          <TabBar.Item 
            title="read"
            key="read"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ require("../assets/img/read.svg") +') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ require("../assets/img/read_active.svg") + ') center center /  21px 21px no-repeat' }}
            />
            }
            selected={props.selectedTab === 'read'}
            onPress={() => {
                props.changeTab('read')
                props.history.push('/')
            }}
          >
          </TabBar.Item>
          <TabBar.Item 
            title="collection"
            key="collection"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ require("../assets/img/collection.svg") +') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ require("../assets/img/collection_active.svg") + ') center center /  21px 21px no-repeat' }}
            />
            }
            selected={props.selectedTab === 'collection'}
            onPress={() => {
                props.changeTab('collection')
                props.history.push('collection')
            }}
          >
          </TabBar.Item>
          <TabBar.Item 
            title="tools"
            key="tools"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ require("../assets/img/tools.svg") +') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ require("../assets/img/tools_active.svg") + ') center center /  21px 21px no-repeat' }}
            />
            }
            selected={props.selectedTab === 'tools'}
            onPress={() => {
              props.changeTab('tools')
              props.history.push('tools')
            }}
          >
          </TabBar.Item>
          <TabBar.Item 
            title="mine"
            key="mine"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ require("../assets/img/mine.svg") +') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ require("../assets/img/mine_active.svg") + ') center center /  21px 21px no-repeat' }}
            />
            }
            selected={props.selectedTab === 'mine'}
            onPress={() => {
              props.changeTab('mine')
              props.history.push('mine')
            }}
          >
          </TabBar.Item>
        </TabBar>
      </div>
    )
})
